<template>
  <div class="children-page">
    <a-layout>
      <a-layout-sider>
        <a-menu
          id="dddddd"
          v-model:openKeys="openKeys"
          v-model:selectedKeys="selectedKeys"
          style="width: 100%"
          mode="inline"
        >
          <template v-for="item of menuData">
            <template v-if="item.children">
              <a-sub-menu :key="item.key" :title="item.name">
                <template #icon>
                  <!-- <MailOutlined />  -->
                </template>
                <template v-for="childrenItem of item.children" :key="childrenItem.key">
                  <template v-if="childrenItem.children">
                    <a-sub-menu :key="childrenItem.key">
                      <template #icon>
                        <!-- <SettingOutlined /> -->
                      </template>
                      <span>{{ childrenItem.name }}</span>
                      <a-menu-item v-for="c of childrenItem.children" :key="c.key" @click="handleClick(c)">
                        <template #icon>
                          <!-- <SettingOutlined /> -->
                        </template>
                        <span>{{ c.name }}</span>
                      </a-menu-item>
                    </a-sub-menu>
                  </template>
                  <template v-else>
                    <a-menu-item :key="childrenItem.key" @click="handleClick(childrenItem)">
                      <template #icon> </template>
                      <span>{{ item.name }}</span>
                    </a-menu-item>
                  </template>
                </template>
              </a-sub-menu>
            </template>
            <template v-else>
              <a-menu-item :key="item.key" @click="handleClick(item)">
                <template #icon>
                  <!-- <SettingOutlined /> -->
                </template>
                <span>{{ item.name }}</span>
              </a-menu-item>
            </template>
          </template>
        </a-menu>
      </a-layout-sider>
      <a-layout-content>
        <!-- <CommonCard>
        </CommonCard> -->
        <RouterView></RouterView>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, ref, watch } from 'vue';
import type { MenuProps } from 'ant-design-vue';
import { MailOutlined, QqOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
import CommonCard from '@/components/card/CommonCard.vue';

import menuData from './base-menu';
import EslintBuildMd from '@/markdown/project/eslint-build.md';
import { RouterView, useRoute, useRouter } from 'vue-router';

const router = useRouter();
const selectedKeys = ref<string[]>(['1']);
const openKeys = ref<string[]>(['sub1']);
const handleClick = (e: any) => {
  if (e.path) {
    router.push(e.path);
  }
};
const titleClick = (e: Event) => {
  console.log('titleClick', e);
};
watch(openKeys, (val) => {
  console.log('openKeys', val);
});
</script>
<style lang="scss" scoped></style>
